<template>
  <div class="content-wrapper">
    <div class="content-header">记录表格</div>
    <div class="content-container">
      <el-form>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="small"
            round
            icon="el-icon-plus"
            @click="showCreate()"
          >
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        >
          <el-table-column label="产品项目" prop="productDictCode" min-width="200px" :formatter="(row, column, cellValue, index) => {
            let data = this.productDictCodeOptions.find(item => {
              if(item.value == cellValue) {
                return true
               }
            })
            if(data) {
              return data.label
            }else {
              return ''
            }
          }"/>
          <el-table-column label="产品子项" prop="subProductDictCode" min-width="200px" :formatter="(row, column, cellValue, index) => {
            let data = this.productDictCodeOptions.find(item => {
              if(item.value == row.productDictCode) {
                return true
               }
            })

            if(data) {
              let data1 = data.children.find(item => {
                if(item.value == cellValue) {
                  return true
                 }
              })
              return data1.label
            }else {
              return ''
            }
          }"/>
          <el-table-column label="表格名称" prop="dataTemplateName" min-width="200px" />
          <el-table-column label="状态" prop="status" width="100px" :formatter="(row, column, cellValue, index) => {
            return cellValue == 0?'停用':'启用'
          }"/>
          <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="{row,$index}">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text" class="el-icon-more" />
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item @click.native="updateTemplate(row)">编辑</el-dropdown-item>
                    <el-dropdown-item v-if="row.dataTemplateId" @click.native="handleDesign(row)">设计</el-dropdown-item>
                    <el-dropdown-item v-if="row.status == 0" @click.native="updateStatus(row)">启用</el-dropdown-item>
                    <el-dropdown-item v-else @click.native="updateStatus(row)">停用</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page-number.sync="listQuery.pageNumber" :page-size.sync="listQuery.pageSize" @pagination="getDataList" />
    </div>
    <Create :dialogVisible="dialogVisibleCreate" :productDictCodeOptions="productDictCodeOptions" @getListData="updateResponse"></Create>
  </div>
</template>

<script>
import { pageManufactureRecordTemplate, updateManufactureRecordTemplateStatus } from '@/api/rs/manufactureRecordTemplate'

import Pagination from '@/components/Pagination'
import Create from '@/views/manufacture/data_template_list/create.vue'

import { listDictTreeItem } from '@/api/base/dict'
export default {
  components: {
    Pagination,
    Create
  },
  data() {
    return {
      listLoading: false,
      list: null,
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
      },
      dialogVisibleCreate: undefined,
      productDictCodeOptions: [],
      updateData: null
    }
  },
  mounted() {
    this.getDataList()
    this.getDictTreeItem()
  },
  methods: {
    updateResponse(val){
      this.getDataList()
    },
    updateTemplate(row){
      this.updateData = row
      this.dialogVisibleCreate = {
        dialogVisible: true,
        label: '修改',
        updateData: this.updateData
      }
      this.updateData = null
    },
    updateStatus(row){
      let updateData = {
        manufactureRecordTemplateId: row.manufactureRecordTemplateId,
        status: row.status == 0?1:0
      }
      updateManufactureRecordTemplateStatus(updateData).then(res => {
        this.$message.success(row.status == 0?"启用成功":"停用成功")
        this.getDataList()
      })
    },
    getDictTreeItem(){
      listDictTreeItem({
        dictGroupCode: "product",
        parentDictId: 0
      }).then(res => {
        this.productDictCodeOptions = res.data
      })
    },
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageManufactureRecordTemplate(this.listQuery).then(res => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    showCreate() {
      console.log(this.updateData, 'this.updateData')
      this.dialogVisibleCreate = {
          dialogVisible: true,
          label: '添加',
          updateData: this.updateData
        }
      this.updateData = null
    },
    handleDesign(row) {
      this.$router.push('/manufacture/data_template_design/' + row.manufactureRecordTemplateId)
    }
  }
}
</script>
